<template>
  <ElDropdown
    ref="elDropdownMenuRef"
    :trigger="trigger"
    placement="bottom-start"
    @command="command"
    @visible-change="visibleChange"
    popper-class="v-context-menu-popper"
  >
    <slot></slot>
    <template #dropdown>
      <ElDropdownMenu>
        <ElDropdownItem
          v-for="(item, index) in itemAttrs"
          :key="`dropdown${index}`"
          :divided="item.divided"
          :disabled="item.disabled"
          :command="item"
        >
          <EcoIcon :icon="item.icon" /> {{ item.label }}
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>
<script setup lang="ts">
import { TagView } from '@/stores/interface'
import { ElDropdown } from 'element-plus'
import { DropdownAttrs } from '@/components/interface/types'

export interface DropdownProps {
  itemAttrs?: DropdownAttrs[]
  trigger?: 'click' | 'hover' | 'focus' | 'contextmenu' // icon名称
  tagItem?: TagView
}
const elDropdownMenuRef = ref<InstanceType<typeof ElDropdown>>()
const emit = defineEmits(['visibleChange'])
// props 默认值
const props = withDefaults(defineProps<DropdownProps>(), {
  itemAttrs: () => [],
  trigger: 'contextmenu',
  tagItem: () => ({}) as TagView
})

const command = (item: DropdownAttrs) => {
  item.command && item.command(item)
}

const visibleChange = (visible: boolean) => {
  emit('visibleChange', visible, props.tagItem)
}

defineExpose({
  elDropdownMenuRef,
  tagItem: props.tagItem
})
</script>
